<template>
  <div class="assess-page">
    <el-container>
      <el-main>
        <div class="content">
          <h1>学生个人总结 </h1>
          <div style="margin-bottom: 25px">
            <span style="margin-left: 5px"><el-tag type="main">{{ studentId }}</el-tag></span>
            <span style="margin-left: 5px"><el-tag type="success">{{ studentName }}</el-tag></span>
          </div>
          <el-descriptions class="des" direction="vertical" :column="4" border>
            <!--            <el-descriptions-item label="学年">2022</el-descriptions-item>
                        <el-descriptions-item label="学号">1810000</el-descriptions-item>
                        <el-descriptions-item label="姓名" :span="2">王九蛋</el-descriptions-item>
                        <el-descriptions-item label="行为规范" :span="4">
                          毛泽东和你们一样，是上个世纪的“90后”。马克思他的生日很好记，是1818年5月5日。非常好记，就是一巴掌又一巴掌，打的资本主义呜呜哭。他是什么地方的人呢？这就是一个问题。我们说他是什么地方的人，首先是说国民和国籍的说法。马克思出生的时候，甚至到第一次世界大战之前，我们知道世界上的主要形式是帝国，不是我们所说的国家。遍布世界欧亚大陆，奥匈帝国、奥斯曼土耳其帝国、波斯帝国、莫卧儿帝国、清帝国。第一次世界大战之前，遍布欧亚大陆的主要就是帝国。帝国的主权是在于皇帝，或者说国王，在于他的传承或者世袭。国家就不一样，我们知道，卢梭在《社会契约论》中说，国家的主权来自Nation-popular
                          Will，什么意思呢？就是来自于民族和人民的集体意志。我们简单的把它说成是主权在民，这个就是所谓的国民、国家与帝国的臣民不一样。
                        </el-descriptions-item>

                        <el-descriptions-item label="学习态度"
                                              :span="4">
                          毛泽东和你们一样，是上个世纪的“90后”。马克思他的生日很好记，是1818年5月5日。非常好记，就是一巴掌又一巴掌，打的资本主义呜呜哭。他是什么地方的人呢？这就是一个问题。我们说他是什么地方的人，首先是说国民和国籍的说法。马克思出生的时候，甚至到第一次世界大战之前，我们知道世界上的主要形式是帝国，不是我们所说的国家。遍布世界欧亚大陆，奥匈帝国、奥斯曼土耳其帝国、波斯帝国、莫卧儿帝国、清帝国。第一次世界大战之前，遍布欧亚大陆的主要就是帝国。帝国的主权是在于皇帝，或者说国王，在于他的传承或者世袭。国家就不一样，我们知道，卢梭在《社会契约论》中说，国家的主权来自Nation-popular
                          Will，什么意思呢？就是来自于民族和人民的集体意志。我们简单的把它说成是主权在民，这个就是所谓的国民、国家与帝国的臣民不一样。
                        </el-descriptions-item>
                        <el-descriptions-item label="身体健康" :span="4">健康</el-descriptions-item>

                        <el-descriptions-item label="思想政治" :span="4">法外狂徒</el-descriptions-item>-->
            <el-descriptions-item :label="label" :span="4">{{ this.summary }}</el-descriptions-item>
          </el-descriptions>
          <!--          <div style="margin:10px">-->
          <!--            <el-rate v-model="value" show-text :max="10" :texts="[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]">-->
          <!--            </el-rate>-->
          <!--          </div>-->
          <!--          <el-button type="primary">下一个</el-button>-->
          <div style="margin:10px">
            <el-input v-model="value" oninput="value=value.replace(/[^0-9.]/g,'')"
                      placeholder="请输入分数"></el-input>
          </div>
          <el-button type="primary" @click="submit" :loading="loading">提交
          </el-button>
        </div>

      </el-main>
    </el-container>

  </div>
</template>


<style scoped>
.assess-page {
  height: 100%;
  /* left:50%; */
}

.content {
  margin-left: 20%;
  margin-top: 1%;
  padding-left: 5%;
  padding-right: 5%;
  padding-top: 3%;
  padding-bottom: 5%;
  /* font-size: 26; */
  width: 50%;
  background-color: #ffffff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.des {
  font-size: larger;
}
</style>
<script>
import {acquireSingleItem, acquireSingleStudentAllScores, rate} from "@/api/judge";

export default {
  data() {
    return {
      studentId: '',
      studentName: '',
      summary: '',
      label: '字数',
      value: null,
      loading: false
    }
  },
  mounted() {
    this.studentId = window.location.search.substring(11);
    const paras1 = {studentId: this.studentId, item: 1}
    acquireSingleItem(paras1).then(res => {
          // console.log(res)
          this.studentName = res.data.studentName
          this.summary = res.data.itemList[0]
          this.label = '字数：' + this.summary.length
        }
    )
    const paras2 = {studentId: this.studentId}
    acquireSingleStudentAllScores(paras2).then(res => {
      console.log(res)
      this.value = res.data.summaryScore;
    })
  },
  methods: {
    submit() {
      // console.log(this.value)
      if (this.value === null || this.value === '') {
        this.$message.error("请输入分数！")
        return
      }
      this.loading = true;
      // console.log(this.value);
      const paras = {
        studentId: this.studentId,
        type: 1,
        grade: this.value,
      }
      rate(paras).then(res => {
        console.log(res)
        if (res.code == 50003) {
          this.$message.error(res.msg)
          this.loading = false
          return
        }
        this.$message.success(res.data)
        this.loading = false
      }).catch(() => {
        // 修改失败，显示错误提示
        this.$message.error('打分失败')
        this.loading = false
      })
      // TODO: send user data to backend
    }
  }
}
</script>
